<template>
	<view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				headHeight: 0,
				content: "富文本",
				current: 0,
				collect: false,
				
				pid: "0", //自己的ID
				sup_id: "", //上级ID
				goods_id: 0,
				TabCur: 0,
				wanlsys: {},
				modalName: null, // 弹出层
				durect: 0, // 角标
				headerOpacity: 0, //不透明度
				currentSwiper: 0, // 轮播图右下角数字
				anchorlist: [{
					name: '主图',
					top: 0
				}, {
					name: '评价',
					top: 0
				}, {
					name: '详情',
					top: 0
				}, {
					name: '推荐',
					top: 0
				}], //导航条锚点
				selectAnchor: 0,
				//产品数据
				goodsData: {
					id: 0,
					category_id: 0,
					shop_id: 0,
					brand_id: 0,
					freight_id: 0,
					title: '',
					image: '',
					images: '',
					flag: '',
					content: '',
					category_attribute: [],
					activity_type: 'goods',
					price: null,
					interval_price: null,
					market_price: null,
					sales: 0,
					brand: {},
					freight: {
						name: '',
						isdelivery: 1
					},
					payment: 0,
					comment: 0,
					praise: 0,
					moderate: 0,
					negative: 0,
					like: 0,
					views: 0,
					status: '',
					category: {},
					follow: true,
					sku: [],
					spu: [],
					promotion: [],
					coupon: [],
					comment_list: {
						data: [],
						figure: 0,
						tag: []
					},
					shop: {
						find_user: {
							fans: 0
						},
						city: ''
					},
					shop_recommend: {}
				},
				// 猜你喜欢
				reload: true,
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				// 商品规格组合
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				selectshop: {}, //存放最后选中的商品
				selectNum: 1, //选中数量
				isChoice: '', // 是否从选择进入
				scrollAnimation: 100, //分享滚动
				pagesNum: 0, //1.1.9 升级 页面数量
			};
		},
		onShow() {
			if (uni.getStorageSync('wanlshop:user')) {
				const userInfo = uni.getStorageSync('wanlshop:user')
				this.pid = userInfo.id;
			}
		},
		onLoad(query) {
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 45) * 2
			
			if (query.hasOwnProperty("q")) {
				const url = decodeURIComponent(query.q);
				var obj = {};
				url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (obj[k] = v));
				
				this.goods_id = obj.id;
				this.sup_id = obj.pid;
			}
			this.pagesNum = getCurrentPages().length; // 1.1.9 升级
			this.wanlsys = this.$wanlshop.wanlsys();
			// 判断是否小程序来源 1.1.9升级
			if (query.hasOwnProperty('scene')) {
				let scene = decodeURIComponent(query.scene);
				scene = this.$wanlshop.getParam(scene);
				this.goods_id = scene.id;
			}
			if (query.hasOwnProperty("id")) {
				this.goods_id = query.id;
			}
			
			this.loadData();
			this.loadlikeData();
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif
			this.durect =
				this.$store.state.statistics.notice.notice +
				this.$store.state.statistics.notice.order +
				this.$store.state.statistics.notice.chat +
				this.$store.state.statistics.order.pay +
				this.$store.state.statistics.order.delive +
				this.$store.state.statistics.order.receiving +
				this.$store.state.statistics.order.evaluate;
		},
		onPageScroll(e) {
			//导航栏渐变
			let tmpY = 150;
			e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadlikeData();
			}
		},
		watch: {
			selectshop(n, o) {
				if (n.price != o.price) {
					// 更新一次优惠券
					this.queryCoupon(n.price);
				}
			}
		},
		computed: {
			canCount() {
				return this.subIndex.some(item => item === -1);
			},
			...mapState(['cart', 'common', 'user'])
		},
		methods: {
			buy(){
				let goodsData = [{
					goods_id: this.goodsData.id,
					number: 1,
					sku_id: this.goodsData.sku[0].id,
				}];
				// 提交订单 
				if (this.$store.state.user.isLogin) {
					console.log(JSON.stringify(goodsData))
					console.log('下一页')
					uni.redirectTo({
						url: `/pages/user/order/addorder?order_type=groups&data=${JSON.stringify(goodsData)}&sup_id=${this.sup_id}`
					});
				} else {
					this.$wanlshop.to('/pages/user/auth/auth');
				}
			},
			callphone(phone){
				
				uni.makePhoneCall({
					phoneNumber: ""+phone //仅为示例
				});
			},
			banner(e) {
				this.current = e.detail.current
			},
			
			previewImage() {
				var images = [];
				if (this.goodsData.instructions === null || this.goodsData.instructions === "") {
				} else {
					images = this.goodsData.instructions.split(",");
				}
				if (images.length > 0) {
					var imageList = [];
					images.forEach(item => {
						imageList.push(this.$wanlshop.oss(item));
					})
					uni.previewImage({
						current: 0, // 当前显示图片的链接/索引
						urls: imageList, // 需要预览的图片链接列表
					});
				}
			},
			member() {
				uni.navigateTo({
					url: `/pages/new/member/member`
				})
			},
			async loadData() {
				//加载商品
				await uni.request({
					url: '/wanlshop/product/goods',
					data: {
						id: this.goods_id
					},
					success: res => {
						//详情正则
						res.data.content = res.data.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (
							match, capture) => {
							var img =
								`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});
						// 价格区间
						if (res.data.sku.length == 0) {
							res.data.interval_price = res.data.price;
							res.data.vip_interval_price = res.data.vip_price;
							res.data.market_price = res.data.price;
						} else {
							let price = [],
								market_price = [],
								vip_price = [];
							for (let value of res.data.sku) {
								price.push(value.price);
								vip_price.push(value.vip_price);
								market_price.push(value.market_price);
							}
							let minPrice = Math.min.apply(null, price),
								maxPrice = Math.max.apply(null, price),
								minVipPrice = Math.min.apply(null, vip_price),
								maxVipPrice = Math.max.apply(null, vip_price),
								maxMarketPrice = Math.max.apply(null, market_price);
							res.data.interval_price = minPrice == maxPrice ? Number(minPrice).toFixed(2) :
								(minPrice + '-' + Number(maxPrice).toFixed(2)); //区间价格
							res.data.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
							res.data.vip_interval_price = minVipPrice == maxVipPrice ? Number(minVipPrice).toFixed(2) :
								(minVipPrice + '-' + Number(maxVipPrice).toFixed(2)); //会员区间价格
						}
						this.goodsData = res.data;
						// 商品规格组合
						this.goodsData.spu.map(item => {
							// 1.1.3升级
							item.item.map((name, key, arr) => {
								arr[key].name = this.$base64.encode(arr[key].name)
							});
							this.selectArr.push('');
							this.subIndex.push(-1);
						});
						// 1.1.3升级
						this.goodsData.sku.map(item => {
							item.difference.map((name, index, arr) => {
								arr[index] = this.$base64.encode(name)
							});
						});
						this.checkItem(); //计算sku里面规格形成路径
						this.checkInpath(-1); //传-1是为了不跳过循环
						// 计算锚点高度
						// setTimeout(() => {
						// 	this.calcAnchor();
						// }, 1000);
					}
				});
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				await uni.request({
					url: '/wanlshop/product/likes?pages=goods',
					data: {
						page: this.current_page
					},
					success: res => {
						this.likeData = this.reload ? res.data.data : this.likeData.concat(res.data
							.data); //评论数据 追加
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = 'more';
					}
				});
			},
			// 查询优惠券，减缓服务器压力，单独查询
			async queryCoupon(price) {
				await uni.request({
					url: '/wanlshop/coupon/query',
					method: 'POST',
					data: {
						shop_id: this.goodsData.shop_id,
						goods_id: this.goodsData.id,
						shop_category_id: this.goodsData.shop_category_id,
						price: price
					},
					success: res => {
						this.goodsData.coupon = res.data;
					}
				});
			},
			// 领取优惠券
			async onReceive(index) {
				let coupon = this.goodsData.coupon[index];
				await uni.request({
					url: '/wanlshop/coupon/receive',
					method: 'POST',
					data: {
						id: coupon.id
					},
					success: res => {
						coupon.id = res.data.id;
						coupon.state = true;
						this.$wanlshop.msg(res.data.msg);
						// 更新状态管理器
						this.$store.commit('statistics/dynamic', {
							coupon: this.$store.state.statistics.dynamic.coupon + 1
						});
					}
				});
			},
			async loadStock(sku_id) {
				await uni.request({
					url: '/wanlshop/product/stock',
					data: {
						sku_id: sku_id
					},
					success: res => {
						this.selectshop.stock = res.data;
					}
				});
			},
			// 商品规格组合 选择
			skuClick(value, spukey, event, index) {
				if (value.ishow) {
					if (this.selectArr[spukey] != value.name) {
						this.$set(this.selectArr, spukey, value.name);
						this.$set(this.subIndex, spukey, index);
					} else {
						this.$set(this.selectArr, spukey, '');
						this.$set(this.subIndex, spukey, -1);
					}
					this.checkInpath(spukey);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						console.log(this.selectArr, '7878787878787');
						console.log(this.shopItemInfo, '7878787878787');
						this.selectshop = this.shopItemInfo[this.selectArr];
						// 1.1.3升级
						this.selectshop.difference.map((name, index, arr) => {
							arr[index] = this.$base64.decode(name)
						})
						this.loadStock(this.selectshop.id);
						this.selectNum = 1;
					}
				}
			},
			//循环所有属性判断哪些属性可选
			checkInpath(clickIndex) {

				//当前选中的兄弟节点和已选中属性不需要循环
				for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.goodsData.spu[i].item.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
						} else {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
						}
					}
				}
				// console.log(this.goodsData.spu)
			},
			//计算有多小种可选路径
			checkItem() {
				let result = this.goodsData.sku.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[
									[]
								]
							)
						);
					},
					[
						[]
					]
				);
			},
			//商品规格修改数量
			changeNum(val) {
				if (this.selectshop.stock) {
					let num = parseInt(val);
					if (num > this.selectshop.stock) {
						this.$wanlshop.msg(`数量不能超过库存 ${this.selectshop.stock} 件`);
						this.selectNum = parseInt(this.selectshop.stock);
					} else {
						this.selectNum = parseInt(val);
					}
				}
			},
			//轮播图指示器
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},




			// 弹出层
			showModal(name) {
				this.isChoice = '';
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					// 强制关闭海报
					if (this.modalName == 'share') {
						this.$refs.wanlShare.closePoster();
					}
					this.modalName = null;
				}
			},
			// 分享回调
			shareChange(e) {
				if (e) {
					this.$wanlshop.auth(`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=1`);
				} else {
					this.modalName = null;
				}
			},
			//禁止父元素滑动
			moveHandle() {},
			// 关注 & 取消
			async follow() {
				this.goodsData.follow = !this.goodsData.follow;
				// 全局控制中心
				if (this.goodsData.follow) {
					this.$store.commit('statistics/dynamic', {
						collection: this.$store.state.statistics.dynamic.collection + 1
					});
				} else {
					this.$store.commit('statistics/dynamic', {
						collection: this.$store.state.statistics.dynamic.collection - 1
					});
				}
				await uni.request({
					url: '/wanlshop/product/follow',
					method: 'POST',
					data: {
						id: this.goodsData.id
					},
					success: res => {
						this.goodsData.follow = res.data;
					}
				});
			},
			//跳转锚点
			toAnchor(index) {
				this.selectAnchor = index;
				uni.pageScrollTo({
					scrollTop: this.anchorlist[index].top,
					duration: 200
				});
			},
			//计算锚点高度
			// calcAnchor() {
			// 	let query = null;
			// 	// 支付宝小程序不能加后面的.in(this)，是它自身的限制
			// 	// #ifndef MP-ALIPAY
			// 	query = uni.createSelectorQuery().in(this)
			// 	// #endif
			// 	// #ifdef MP-ALIPAY
			// 	query = uni.createSelectorQuery()
			// 	// #endif
			// 	query.select('#evaluate').boundingClientRect(rec => {
			// 		this.anchorlist[1].top = rec.top - this.wanlsys.height - 45;
			// 	}).exec();
			// 	query.select('#details').boundingClientRect(rec => {
			// 		this.anchorlist[2].top = rec.top - this.wanlsys.height - 45;
			// 	}).exec();
			// 	query.select('#recommend').boundingClientRect(rec => {
			// 		this.anchorlist[3].top = rec.top - this.wanlsys.height - 45;
			// 	}).exec();
			// },
			// 评论页
			onTag(tag) {
				this.$wanlshop.to('/pages/product/comment?id=' + this.goodsData.id + '&praise=' + this.goodsData.praise +
					'&tag=' + tag);
			},
			// 打开购物车
			toCart() {
				uni.switchTab({
					url: '/pages/cart'
				});
			},
			// 完成选择
			completeSelection() {
				if (this.canCount) {
					this.$wanlshop.msg('请选择完成规格');
				} else {
					this.ProcessingData();
				}
			},
			// 提交数据
			SubmitData(name, type) {
				if (this.goodsData.is_chufang == 1) {
					uni.showModal({
						title: "提示",
						content: "暂不支持购买处方药",
						showCancel: false,
						confirmText: "我知道了"
					})
					return;
				}
				
				
				// if (!this.subIndex[0]) {
				// this.$wanlshop.msg('客官先别急，系统还在加载');
				// } else {

				// }
				if (type == 1) {
					if (this.canCount) {
						this.$wanlshop.msg('请选择完成规格');
					} else {
						this.isChoice = name;
						this.ProcessingData();
					}
				} else {
					this.modalName = 'option';
					this.isChoice = name;
				}
			},
			ProcessingData() {
				if (this.isChoice == 'addToCart') {
					this.$store.dispatch('cart/add', {
						shop_id: this.goodsData.shop_id,
						shop_name: this.goodsData.shop.shopname,
						goods_id: this.goodsData.id,
						title: this.goodsData.title,
						number: this.selectNum,
						image: this.goodsData.image,
						sku: this.selectshop,
						sku_id: this.selectshop.id,
						sum: this.$wanlshop.bcmul(
							(this.goodsData.user_member == 1 && this.selectshop.vip_price) ?
							this.selectshop.vip_price :
							this.selectshop.price,
							this.selectNum
						)
						// sum: this.$wanlshop.bcmul(this.selectshop.price, this.selectNum)
					});
					this.$wanlshop.msg('已加购物车');
				} else if (this.isChoice == 'placeOrder') {
					let goodsData = [{
						goods_id: this.goodsData.id,
						number: this.selectNum,
						sku_id: this.selectshop.id,
					}];
					// 提交订单 
					if (this.$store.state.user.isLogin) {
						console.log(JSON.stringify(goodsData))
						console.log('下一页')
						uni.redirectTo({
							url: `/pages/user/order/addorder?order_type=groups&data=${JSON.stringify(goodsData)}&sup_id=${this.sup_id}`
						});
					} else {
						this.$wanlshop.to('/pages/user/auth/auth');
					}

				} else {
					this.$wanlshop.msg('数据异常');
				}
				this.hideModal();
			},
			productSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			}
		}
	};
</script>

<style lang="scss">
	toast,
	uni-toast {
		z-index: 9999;
	}

	.cu-custom .cu-bar .search-form {
		background-color: #fff;
	}

	.cu-custom .cu-bar {
		background-color: #f3f3f3;
	}

	.cu-custom .bar-bg {
		background-color: rgba(243, 243, 243, 0.96);
	}

	.cu-custom .cu-bar {
		z-index: 99;
	}

	/* #ifdef MP */
	.cu-custom .cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */

	.cu-custom .cu-bar .nav .cu-item {
		line-height: 70rpx;
		height: 70rpx;
	}

	.swiper-box {
		position: relative;
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper {
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper swiper-item image {
		width: 100%;
		height: 100vw;
	}

	.swiper-box .indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.new-member {
		width: 118rpx;
		height: 38rpx;
		border-radius: 10rpx;
		opacity: 1;
		background: rgba(66, 137, 243, 0.1);
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #84BD00;
		text-align: center;
		line-height: 38rpx;
	}

	.new-cons {
		display: flex;
		margin-left: 25rpx;

		.new-names {
			font-size: 30rpx;
			color: #84BD00;
		}

		.new-words {
			font-size: 30rpx;
			color: #999999;
			margin-left: 30rpx;
		}
	}

	.new-member-box {
		margin: 0 25rpx;
		margin-top: 25rpx;
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(270deg, #AFDFFF 4%, #D1EFFF 100%);
		border-radius: 20rpx;

		.new-lcons {
			display: flex;
			align-items: center;

			image {
				width: 52rpx;
				height: 52rpx;
				margin-left: 22rpx;
			}

			view {
				font-size: 30rpx;
				color: #84BD00;
				margin-left: 14rpx;
			}
		}

		.new-open {
			width: 133rpx;
			height: 64rpx;
			border-radius: 50rpx;
			background: #84BD00;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			line-height: 64rpx;
			margin-right: 22rpx;
		}
	}
</style>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.headcontent {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		z-index: 6666;

		.contentbox {
			width: 750rpx;
			display: flex;
			position: relative;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-left: 20rpx;
				position: relative;
				z-index: 999;
			}
		}
	}

	.banner {
		width: 750rpx;
		height: 498rpx;
		position: relative;

		.shadow {
			width: 750rpx;
			height: 498rpx;
			position: absolute;
			top: 0;
			z-index: 1;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 40%);
		}

		swiper {
			width: 750rpx;
			height: 498rpx;
			position: relative;



			.swiper-item {
				width: 750rpx;
				height: 498rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.dropBox {
			width: 700rpx;
			margin-left: 34rpx;
			display: flex;
			position: absolute;
			bottom: 60rpx;

			.drop {
				width: 46rpx;
				height: 7rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 50rpx;
				margin-right: 8rpx;
			}

			.select {
				background-color: #fff;
			}
		}
	}

	.difficult {
		width: 750rpx;
		margin-top: -45rpx;
		position: relative;
		display: flex;
		flex-wrap: wrap;

		image {
			width: 750rpx;
			position: absolute;
		}

		.up {
			position: relative;
			// width: 500rpx;

			.numname {
				width: 704rpx;
				margin-right: 46rpx;
				margin-top: 14rpx;
				text-align: right;
				color: #fff;
				font-size: 26rpx;
			}

			.upTitle {
				color: #FB4E2F;
				font-size: 26rpx;
				margin-left: 63rpx;
			}

			.upDetail {
				width: 650rpx;
				margin-left: 50rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px dashed #D8D8D8;

				.upMoney {
					color: #FB4E2F;
					font-size: 60rpx;

					text {
						font-size: 36rpx;
					}
				}

				.upName {
					font-size: 36rpx;
					color: #3D3D3D;
					margin-left: 68rpx;
				}
			}

			.upThree {
				width: 630rpx;
				margin-left: 60rpx;
				height: 233rpx;
				display: flex;
				flex-wrap: wrap;
				align-content: center;

				.upBox {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 10rpx 0;

					.upLname {
						font-size: 26rpx;
						color: #666666;
					}

					.upCon {
						margin-left: 37rpx;
						font-size: 26rpx;
						color: #999999;
					}

					.next-icon {
						margin-top: 2rpx;
						margin-left: 10rpx;
						font-size: 24rpx;
					}

					image {
						width: 12rpx;
						height: 12rpx;
						position: relative;
						margin-top: 2rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.title {
		width: 664rpx;
		margin-left: 43rpx;
		display: flex;
		align-items: center;
		height: 110rpx;

		.line {
			width: 8rpx;
			height: 34rpx;
			background-color: #FB4E2F;
			border-radius: 50rpx;
		}

		.titleName {
			font-size: 33rpx;
			color: #3D3D3D;
			margin-left: 17rpx;
		}
	}

	.boxCon {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 30rpx;
		padding:20rpx;
		image {
			width: 100%;
		}
		
	}

	.shopDetails {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-bottom: 30rpx;

		.headShop {
			width: 638rpx;
			margin-left: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 40rpx;

			.lCon {
				display: flex;
				align-items: center;

				image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 8%;
				}

				.shopMore {
					margin-left: 18rpx;
					width: 400rpx;
					display: flex;
					flex-wrap: wrap;
					align-content: space-between;

					.shopName {
						width: 100%;
						font-size: 33rpx;
						color: #3D3D3D;
					}

					.shopStar {
						width: 100%;
						display: flex;
						align-items: center;

						.select-star-icon {
							color: #84BD00;
						}

						.star-icon {
							color: #d8d8d8
						}

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 6rpx;
						}

						.anum {
							font-size: 26rpx;
							color: #FB4E2F;
							margin-left: 6rpx;
						}

						.amoney {
							font-size: 26rpx;
							color: #999999;
							margin-left: 28rpx;
						}
					}

					.time {
						width: 100%;
						font-size: 26rpx;
						color: #333333;
					}
				}
			}

			.call {
				width: 104rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.call-icon {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					background-color: #eee;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				image {
					width: 52rpx;
					height: 52rpx;
				}

				.call-name {
					font-size: 26rpx;
					color: #999999;
					margin-top: 6rpx;
				}
			}
		}

		.titleNames {
			margin-left: 26rpx;
			font-size: 26rpx;
			color: #3D3D3D;
			margin-top: 30rpx;
		}

		.list {
			width: 690rpx;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			margin-top: 36rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				margin-left: 26rpx;
			}

			.goods {
				width: 416rpx;
				margin-left: 22rpx;
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;
				position: relative;

				.goodsName {
					width: 100%;
					font-size: 30rpx;
					color: #3D3D3D;
				}

				.goodsLave {
					width: 100%;
					font-size: 26rpx;
					color: #999999;
				}

				.evaluate {
					width: 157rpx;
					height: 39rpx;
					border-radius: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #F7F7F7;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 0 !important;
					}

					view {
						font-size: 22rpx;
						color: #666666;
						margin-left: 6rpx;
					}
				}

				.money {
					width: 100%;
					display: flex;
					align-items: flex-end;

					.price {
						color: #FB4E2F;
						font-size: 36rpx;

						text {
							font-size: 26rpx;
						}
					}

					.original {
						font-size: 26rpx;
						color: #999999;
						margin-left: 10rpx;
						text-decoration: line-through;
						margin-bottom: 4rpx;
					}
				}

				.buy {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 136rpx;
					height: 65rpx;
					background-color: #FB4E2F;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50rpx;
					font-size: 26rpx;
					color: #fff;
				}
			}
		}
	}

	.bottomBox {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px 17rpx 50rpx 0px rgba(0, 0, 0, 0.13);
		position: fixed;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		align-items: center;

		// 334
		.nar {
			width: 334rpx;
			display: flex;
			justify-content: space-around;

			.three {
				width: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;

				image {
					width: 62rpx;
					height: 62rpx;
				}

				.icons {
					font-size: 40rpx;
				}

				.selecticons {
					font-size: 40rpx;
					color: #84BD00;
				}

				.nameview {
					width: 100rpx;
					text-align: center;
					font-size: 20rpx;
					color: #3D3D3D;
					margin-top: 6rpx;
				}
			}
		}

		.operate {
			width: 396rpx;
			height: 82rpx;
			margin-right: 20rpx;
			display: flex;

			.add {
				width: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				background: linear-gradient(270deg, #FBBE2F 0%, #FBE02F 100%);
				border-radius: 50rpx 0px 0px 50rpx;
				color: #fff;
			}

			.buy {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				background: linear-gradient(270deg, #FB4E2F 0%, #FBA92F 74%);
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				color: #fff;
			}
		}
	}

	.null {
		width: 750rpx;
		height: 160rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>